<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间戳工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <style>
        .site-doc-icon li .layui-anim {
            width: 100px;
            height: 100px;
            line-height: 150px;
            margin: 0 auto 10px;
            text-align: center;
            background-color: #009688;
            cursor: pointer;
            color: #fff;
            border-radius: 50%;
        }

        body {
            margin-top: 20px;
        }


    </style>
</head>

<body>


<div class="layui-form">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>时间转换成(毫)秒</legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px;">日期时间选择器</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="datetimeSelector" placeholder="yyyy-MM-dd HH:mm:ss">
        </div>

        <label class="layui-form-label">是否毫秒</label>
        <div class="layui-input-inline">
            <input type="checkbox" id="isMil" name="isMil" title="毫秒" checked="">
        </div>

        <label class="layui-form-label" style="width: 100px;">转换结果</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="timeInSecondOrMil" >
        </div>

        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-submit="" func="time2ms">转换</button>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title">
        <legend>毫秒转时间</legend>
    </fieldset>
    <div class="layui-form-item">

        <label class="layui-form-label" style="width: 100px;">时间（ms）</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="timeInMil" >
        </div>

        <label class="layui-form-label" style="width: 100px;">时间</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="dateFromMil" >
        </div>

        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-submit="" func="ms2time">转换</button>
        </div>
    </div>

</div>


<script src="static/jquery/jquery.min.js"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['element', 'form', 'laydate'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#datetimeSelector'
            , type: 'datetime'
        });
    });
    $("button").on('click',function () {
        var othis = $(this);
        var func = othis.attr("func");
        if(func == 'time2ms') {
            time2ms();
        }else if(func == 'ms2time'){
            ms2time();
        }
    })

    function ms2time() {
        var ms = $('#timeInMil').val();
        $.get('rest/time/ms2time',{'timeInMil':ms},function(resp){
            $('#dateFromMil').val(resp);
        });
    }

    function time2ms() {
        var dateStr = $("#datetimeSelector").val();
        var isMil = $("#isMil").prop('checked');
        $.get('rest/time/time2ms',{'dateStr':dateStr},function(resp){
            var result = parseInt(resp);
            if(!isMil) {
                result = result / 1000;
            }
            $('#timeInSecondOrMil').val(result);
        });
    }

</script>
</body>
</html>